<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive Nav bar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="stylesheet" href="../css/semantic.min.css">
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/global.css">
	<script type="text/javascript" src="../js/libs/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../js/libs/semantic.min.js"></script>
</head>
<body>
	<div class="is-menu"><i class="th icon primary"></i></div>
    <div class="ui top fixed inverted menu" id="menu">
    	<div class="item brand">
    		<i class="large arrow circle down icon"></i>
    	</div>
        <a class="item">One</a>
        <a class="active item">Two</a>
        <a class="item">Three</a>
        <a class="item">Four</a>

        <div class="right menu">
        	<div class="item">
            	<div class="ui icon input" >
            		<i class="search link icon"></i>
            		<input type="text" placeholder="search...">
            	</div>
        	</div>
            <a href="" class="item">Register</a>
        </div>
    </div>
	<div class="ui main container mt-80">
		<div class="ui segment basic">
	    	<h1 class="ui header">带有搜索条的导航栏
				<div class="sub header">在导航栏右侧添加搜索条</div>
			</h1>
	    </div>
		
		<div class="ui segment">
			<p>在<a href="./menu-responsive-nav-bar-basic.html" target="_blank" style="color:orange">基本款的响应式导航栏</a>基础上，稍作调整即可在右侧添加一个搜索条。实现这个的基本思路是将基本款的 .right.menu 所包裹的节点中添加一个 input：</p>
			<div class="ui segment inverted">
				<pre><code>&lt;div class="right menu"&gt;
	&lt;div class="item"&gt;
    	&lt;div class="ui icon input" &gt;
    		&lt;i class="search link icon"&gt;&lt;/i&gt;
    		&lt;input type="text" placeholder="search..."&gt;
    	&lt;/div&gt;
	&lt;/div&gt;
    &lt;a href="" class="item"&gt;Register&lt;/a&gt;
&lt;/div&gt;</code></pre>
			</div>
			<p>注意，说起来添加一个 input 很简单，其实也有一些小技巧，否则一些细节上还是存在问题。第一、导航栏上的搜索条，最好不要用文字按钮，而是使用搜索图标，所以用一个 div.ui<span style="color: orange">.icon</span>.input 来包裹 i 和 input，而不是习惯上想象的 div.ui.input 来包裹。 第二、搜索图标如果直接用 i.search.icon 还是达不到要求——鼠标经过搜索图标时不会出现手形图标，不能起到提示点击的效果，因此，这里应该用 <span class="ui label">i.search.link.icon</span>，<span style="color: orange">.link</span>专门用于让.icon具有可点击效果。</p>
		</div>
	</div>
	
</body>
<script>
$(function(){
    $('.is-menu').click(function(){
        $('i',this).toggleClass('arrow circle up');
        $('#menu').transition('slide down')
    })
})
</script>
</html>